import React, { useRef, FC, forwardRef, useImperativeHandle, useState, useEffect } from 'react'
import { withRouter } from 'react-router-dom'
import TableDefined from '@/components/common/tableDefined'
import Dynamic from '@/api/dynamic'
import { modalLayoutSm } from '@/config/layout'
import { Button, Input, DatePicker, Select, Modal, Cascader, Spin, Upload, Table, Form, Steps, Row, Col, Tabs, Card, Radio, message } from 'antd';
import MyDefineSelect from '@/components/common/myDefineSelect'
import $axios from '@/utils/axios';
import { fn } from 'moment'
import TableDefinedEditCom from '@/components/common/tableDefinedEdit'
const { Option } = Select;
const delApiid = 'DMT_MNG_02_03'
const DataBase: FC = () => {
  const tableRef: RefType = useRef()
  const AddComRef: RefType = useRef()
  const searchConfigList = [
    {
      key: 'search_api_name',
      slot: <Input placeholder="请输入接口名称" allowClear />,
      rules: [],
      initialValue: ''
    }
  ];

  // 新增按钮
  const AddBtn = () => (
    <Button className="fr" onClick={add} type="primary">
      新增
    </Button>
  )
  // 添加
  const add = () => {
    AddComRef.current.init()
  }
  // 添加
  const edit = (id) => {
    AddComRef.current.init(id);
  }
  // 删除
  const del = (id: any) => {
    Modal.confirm({
      title: '确认删除？',

      onOk() {
        // Role.roleDel({
        //   roleid:record.roleid,
        //   isFormData:true
        // }).then(()=>{
        //   tableRef.current.update();
        // })
        Dynamic.getDynamicQuery({
          apiID: delApiid,
          apiParam: {
            api_id: id
          }
        }).then((res) => {
          tableRef.current.update();
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  const columns = [
    {
      title: '操作',
      align: 'left',
      dataIndex: 'scan',
      key: 'scan',
      width: '150px',
      fixed: 'right',
      render: (text, record, index) => {
        return <div>
          <Button className="btn" onClick={() => edit(record.api_id)} size="small">编辑</Button>
          <Button style={{ marginLeft: '10px' }} className="btn" onClick={() => del(record.api_id)} size="small">删除</Button>
        </div>
      }
    }
  ]
  return (
    <>
      <div>
        {/* <BatchDel /> */}
        <AddBtn />
      </div>
      <div>
        <TableDefined
          apiFun={Dynamic.getDynamicQuery}
          columns={columns}
          ref={tableRef}
          searchConfigList={searchConfigList}
          extraProps={{ apiID: 'DMT_MNG_02', apiParam: { 'orderBy': 'api_id' } }}
          beforeSearch={(val: any) => {
            console.log(val)
            // eslint-disable-next-line no-param-reassign
            val.where = [{ "feild": "api_name", "connector": "like", "value": val.search_api_name }];
            // eslint-disable-next-line no-param-reassign
            return {}
          }}
        />
        <TableDefinedEditCom ref={AddComRef}
          apiID="DMT_MNG_01"
          apiParamMng_id="DMT_MNG_02_01"
          addApiId='DMT_MNG_02_01'
          updateApiId='DMT_MNG_02_02'
          detailApiId='DMT_MNG_02_04'

          callback={() => {
            tableRef.current.update();
          }} 
        />
      </div>

    </>
  )
}
export default withRouter(DataBase)